<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="auth" uri="http://www.jiyinit.com/authTag"%>
<html lang="en">
<head>
    <link rel="stylesheet" href="${basePath}/assets/css/foundation-datepicker.css"/>
</head>
<body>
<div class="right-container">
    <div class="manage-button text-left">
        <div class="container-select text-left">

            <form id="form" method="post">

                <div class="search-input">
                    <span>开始日期：</span>
                    <input id="startTime" name="startTime" type='text'/>
                </div>
                <div class="search-input">
                    <span>结束日期：</span>
                    <input id="endTime" name="endTime" type="text" />
                </div>
                <%--<auth:auth authUrl="/findSystemListByPage">--%>
                <button id="searchBtn" class="btn btn-primary" type="button">
                    <i class="fa fa-search"></i> 查询
                </button>
                <button id="exportBtn" class="btn btn-primary" type="button">
                    <i class="fa fa-file-excel-o"></i> 导出
                </button>
                <%--</auth:auth>--%>
            </form>
        </div>

    </div>

    <div class="row">
        <div class="col-xs-12" style="overflow-y: scroll;height: 600px;width: 100%;">
            <table id="grid-table" class="table table-bordered">
                <caption>统计数据</caption>
                <thead>
                <tr id="headTr">
                    <td>序号</td>
                    <td>申请人</td>
                    <td>所属部门</td>
                    <td>请假类型</td>
                    <td>请假开始时间</td>
                    <td>请假结束时间</td>
                    <td>联系电话</td>
                    <td>请假时长</td>
                    <td>合计天数</td>
                    <td>申请时间</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="tabBody"></tbody>
            </table>
            <div id="grid-pager"></div>
        </div>
    </div>
</div>
</body>
<!-- page specific plugin scripts -->
<script src="${basePath}/plugins/jqGrid/jquery.jqGrid.min.js${VERSION}"></script>
<script src="${basePath}/plugins/jqGrid/grid.locale-cn.js${VERSION}"></script>
<script type="text/javascript" src="${basePath}/assets/js/foundation-datepicker.js"></script>
<script type="text/javascript">
    /**
     * 日期格式化（原型扩展或重载）
     * 格式 YYYY/yyyy/ 表示年份
     * MM/M 月份
     * dd/DD/d/D 日期
     * @param {formatStr} 格式模版
     * @type string
     * @returns 日期字符串
     */
    Date.prototype.formatYMD = function(formatStr){
        var str = formatStr;
        //var Week = ['日', '一', '二', '三', '四', '五', '六'];
        str=str.replace(/yyyy|YYYY/, this.getFullYear());
        str=str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0' + (this.getMonth()+1));
        str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
        str=str.replace(/HH/, this.getHours()>9?this.getHours().toString():'0' + this.getHours());
        str=str.replace(/mm/, this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
        str=str.replace(/ss/, this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
        return str;
    }

    var firstDate = new Date();
    firstDate.setDate(1); //第一天

    var endDate = new Date(firstDate);
    endDate.setMonth(firstDate.getMonth()+1);
    endDate.setDate(0);//本月最后一天

    $("#startTime").val(firstDate.formatYMD("yyyy-MM-dd"));
    $("#endTime").val(endDate.formatYMD("yyyy-MM-dd"));

    $(function () {
        $('#startTime').fdatepicker({
            format: 'yyyy-mm-dd',
        });
        $('#endTime').fdatepicker({
            format: 'yyyy-mm-dd',
        });
    });
</script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    var dialog = null;
    //查看流程详情
    function showDetail(obj) {
        var url = $(obj).attr("href");
        dialog = layer.open({
            title: "查看详情",
            type: 2,
            maxmin: true,
            area: ["100%", "100%"],
            content: url,
        });
        return false;
    }
    //生成表单内容
    function generateTable(list) {
        document.getElementById("tabBody").innerHTML = "";
        var html = "";
        for (var i = 0; i < list.length; i++){
            html += "<tr>" +
                    "<td>"+ (i + 1) +"</td>" +
                    "<td>"+ list[i].userName +"</td>" +
                    "<td>"+ list[i].orgName +"</td>" +
                    "<td>"+ list[i].lvType +"</td>" +
                    "<td>"+ new Date(list[i].lvStartTime).formatYMD("yyyy-MM-dd HH:mm:ss") +"</td>" +
                    "<td>"+ new Date(list[i].lvEndTime).formatYMD("yyyy-MM-dd HH:mm:ss") +"</td>" +
                    "<td>"+ list[i].linkTel +"</td>" +
                    "<td>"+ parseFloat(list[i].lvHours).toFixed(1) +"</td>" +
                    "<td>"+ parseFloat(list[i].lvDay).toFixed(1) +"</td>" +
                    "<td>"+ new Date(list[i].createDate).formatYMD("yyyy-MM-dd HH:mm:ss") +"</td>" +
                    //"<td><a href=\"${basePath}/statistics/toLeaveDetail?instanceId="+ list[i].executionId + "\" " +
                    "<td><a href=\"${basePath}/statistics/toLeaveDetail?instanceId="+list[i].executionId+"\" " +
                    " onclick=\"return showDetail(this)\">详情</a></td>" +
                    "</tr>"
        }
        document.getElementById("tabBody").innerHTML = html;
    }
    //查询数据
    function queryData(){
        $.ajax({
            type: "post",
            cache: false,
            url: "${basePath}/statistics/getInfoList",
            data: $("#form").serialize(),
            dataType: "json",
            success: function (data) {
                if(data.status == "0"){
                    generateTable(data.data);
                }else{
                    document.getElementById("tabBody").innerHTML = "";
                    layer.msg("未查询到相关数据...", {time: 3000});
                }
            },
            error: function () {
                layer.msg("系统未知错误!", {time: 3000});
            }
        });
    }
    window.onload = queryData();

    /*查询按钮点击*/
    $("#searchBtn").on("click", function () {
        queryData();
    });

    /*导出按钮点击*/
    $("#exportBtn").on("click", function () {
        var headList = "";
        var length = $("#headTr").find("td").length;
        $("#headTr").find("td").each(function (index, element) {
            if(index == length-1){
                return;
            }else{
                if(index == length-2){
                    headList = headList + $.trim($(this).text());
                }else{
                    headList = headList + $.trim($(this).text()) + ",";
                }
            }
        });
        var input = document.createElement("input");
        input.type = "text";
        input.name = "headList";
        input.value = headList;
        input.style.display = "none";
        document.getElementById("form").appendChild(input);
        $("#form").prop("action", "${basePath}/statistics/exportLeaveInfo");
        $("#form").submit();
    });


</script>

</html>